html {
  #music-player {
    .layout {
      .audio-player {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: #333;
        audio {
          height: 100%;
          width: 100%;
          outline: none;
        }
        .player-module {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .controls-left {
            width: 160px;
            height: 100%;
            display: flex;
            align-items: center;

            .icon.icon-playbar-prev {
              width: 36px;
              height: 36px;
              background-position: 0 -143px;
            }
            .icon-playbar-prev:hover {
              background-position: -36px -143px;
            }
            .icon-playbar-pause {
              background-position: 0 -60px;
            }
            .icon-playbar-pause:hover {
              background-position: -60px -60px;
            }
            .big-player {
              width: 60px;
              height: 60px;
              margin: 0 10px;
            }
            .icon-playbar-play {
              background-position: -60px 0;
            }
            .icon-playbar-next {
              background-position: -144px -143px;
              width: 36px;
              height: 36px;
            }
            .icon-playbar-next:hover {
              background-position: -180px -143px;
            }
          }
        }
        .bar-albumImg {
          width: 60px;
          height: 60px;
          margin-left: 30px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .controls-bar {
          width: 370px;
          height: 100%;
          margin-left: 20px;
          padding-top: 10px;

          .song-info {
            cursor: default;
            font-size: 12px;
            display: flex;

            .like-song {
              color: #c4c3c3;
              width: 290px;
            }
            .coding-duration {
              color: #fff;
              font-family: Tahoma, Arial, Verdana;
              font-size: 12px;
              opacity: 0.4;
            }
          }
          .bar {
            height: 5px;
            cursor: pointer;
            position: relative;
            margin-top: 10px;
            .bg {
              height: 100%;
              background: url(https://www.kugou.com/yy/static/images/progress_bg_middle.png) repeat-x top left;
            }
            .progress-bar {
              position: absolute;
              background: url(https://www.kugou.com/yy/static/images/progress_bar_middle.png) repeat-x top left;
              height: 3px;
              top: 0;
            }
            .drag-playhead {
              position: absolute;
              height: 3px;
              top: -4px;
              left: -4px;
            }
            .drag-playhead.icon-playbar-playhead {
              width: 12px;
              height: 12px;
              background-position: -217px -181px;
            }
          }
        }
        .controls-right {
          width: 260px;
          height: 100%;
          display: flex;
          align-items: center;
          margin-left: 30px;
          .volume {
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;
            .icon-playbar-minvox {
              background-position: -64px -195px;
            }
            .icon-playbar-silence {
              background-position: -128px -195px;
            }
            .icon-playbar-minvox,
            .icon-playbar-silence {
              width: 16px;
              height: 16px;
              transition: none;
            }
            .volume-panel {
              // display: none;
              width: 30px;
              height: 115px;
              position: absolute;
              top: -115px;
              left: -6px;
              background: url(https://www.kugou.com/yy/static/images/play/volume-panel.png);
              overflow: hidden;
              .volume-bar {
                position: absolute;
                left: 13px;
                width: 3px;
                height: 90px;
                top: 10px;
                overflow: hidden;
                .bar {
                  width: 3px;
                  height: 90px;
                  background: url(https://www.kugou.com/yy/static/images/play/volume_middle.png) repeat-y top left;
                  position: absolute;
                  // left: 13px;
                  top: 0;
                }
              }
            }
            .icon-playbar-progressbottom {
              width: 9px;
              height: 9px;
              background-position: -242px -130px;
              position: absolute;
              top: 10px;
              left: 10px;
            }
          }
        }
      }
    }
  }
}
